<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据图表，流量表，题库表，统分表</title>
    <!-- 引入 echarts.js -->
    <script src="../../public/js/echarts.min.js"></script>
    <style type="text/css">
        div{
            float:left;
            margin-left: 50px;
        }
        h1{
            text-align: center;
            margin-top:10px;
            clear: left;
        }
    </style>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <h1>题库统计</h1>
    <div id="main" style="width: 600px;height:400px;"></div>
    <div id="cicle" style="width: 540px;height:400px;"></div>
    <h1>考分统计</h1>
    <div id="test" style="width: 600px;height:400px;"></div>
    <div id="testc" style="width: 540px;height:400px;"></div>
</body>
</html>
<script src="../../public/js/jquery.js"></script>
<script>
    // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var myChart1 = echarts.init(document.getElementById('cicle'));
        var test = echarts.init(document.getElementById('test'));
        var testc = echarts.init(document.getElementById('testc'));
       
        // 异步加载数据
        $.ajax({
                type:'post',
                dataType:'json',
                url:'ajaxCharts.php',
                success:function(data){
                    console.log(data);
                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '题库统计表'
                        },
                        tooltip: {},
                        legend: {
                            data:['题库类别']
                        },
                        xAxis: {
                            data: ["单选题","多选题","填空题","判断题"]
                        },
                        yAxis: {},
                        series: [{
                            name: '题库类别',
                            type: 'bar',
                            data: [data['single'], data['multiple'], data['fill'], data['judge']],
                             // 普通样式。
                            itemStyle: {
                            // 点的颜色。
                            color: '#88BDE1'
                    },
                        }]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);

                    myChart1.setOption({
                        series : [
                            {
                                name: '题库占比',
                                type: 'pie',
                                radius: '55%',
                                data:[
                                    {value:data['single'], name:'单选题'},
                                    {value:data['multiple'], name:'多选题'},
                                    {value:data['fill'], name:'填空题'},
                                    {value:data['judge'], name:'判断题'},
                                ]
                            }
                        ]
                    })


                    /*****分数统计****/
                     // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '题库统计表'
                        },
                        tooltip: {},
                        legend: {
                            data:['成绩类别']
                        },
                        xAxis: {
                            data: ["优秀","良好","及格","不及格","差"]
                        },
                        yAxis: {},
                        series: [{
                            name: '成绩类别',
                            type: 'bar',
                            data: [data['优秀'], data['良好'], data['及格'], data['不及格'],data['差']],
                             // 普通样式。
                            itemStyle: {
                            // 点的颜色。
                            color: '#88BDE1'
                    },
                        }]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    test.setOption(option);

                    testc.setOption({
                        series : [
                            {
                                name: '成绩占比',
                                type: 'pie',
                                radius: '55%',
                                data:[
                                    {value:data['优秀'], name:'优秀'},
                                    {value:data['良好'], name:'良好'},
                                    {value:data['及格'], name:'及格'},
                                    {value:data['不及格'], name:'不及格'},
                                    {value:data['差'], name:'差'},
                                ]
                            }
                        ]
                    })

                }
         });
       
</script>